<!DOCTYPE html>
<html lang="en">
<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>OIPlayer jQuery Plugin - Open Images Platform</title>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"><!-- help ie --></script>
  <script src="plugins/flowplayer-3.2.6.min.js" type="text/javascript"><!-- help ie --></script>
  <script src="js/jquery.oiplayer.js" type="text/javascript"><!-- help ie --></script>
  <link href="css/oiplayer.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
  $(document).ready(function() {
      $('body.oiplayer-example').oiplayer({
          server : 'http://www.openimages.eu', /* msie (or java) has issues with just a dir */
          jar : '/oiplayer/plugins/cortado-ovt-stripped-0.6.0.jar',
          flash : '/oiplayer/plugins/flowplayer-3.2.7.swf',
          controls : 'top'
      });
  });
  </script>
</head>
<body class="oiplayer-example">

<div class="main">
  <h1>OIPlayer jQuery plugin</h1>
  <h2>HTML5 audio and video player with fallback to Java and Flash</h2>
  
  <!-- div#clientcaps is needed for Java detection in MSIE -->
  <div id="clientcaps">  </div> 
  
  <!-- video embed tag copied from http://www.openimages.eu/media/9728#share with added width and height attributes -->
  <div xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#" class="oip_media" about="http://www.openimages.eu/files/09/88068.9730.WEEKNUMMER364-HRE0000D9C6.webm">
    <video width="512" height="288" poster="http://www.openimages.eu/images/67506/WEEKNUMMER364-HRE0000D9C6.png" controls="controls">
      <source type="video/webm; codecs=vp8" src="http://www.openimages.eu/files/09/88068.9730.WEEKNUMMER364-HRE0000D9C6.webm" />
      <source type="video/ogg; codecs=theora" src="http://www.openimages.eu/files/09/9734.9730.WEEKNUMMER364-HRE0000D9C6.ogv" />
      <source type="video/ogg; codecs=theora" src="http://www.openimages.eu/files/09/88071.9730.WEEKNUMMER364-HRE0000D9C6.ogv" />
      <source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="http://www.openimages.eu/files/09/9740.9730.WEEKNUMMER364-HRE0000D9C6.mp4" />
      <source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="http://www.openimages.eu/files/09/88065.9730.WEEKNUMMER364-HRE0000D9C6.mp4" />
      <source type="application/x-mpegurl" src="http://www.openimages.eu/files/09/35026.9730.WEEKNUMMER364-HRE0000D9C6.m3u8" />
    </video>
    <span class="license"><a href="http://www.openimages.eu/media/9728" rel="cc:attributionURL" property="dct:title">Storm</a>, by <a href="http://www.openbeelden.nl/users/beeldengeluid" rel="dct:creator" property="cc:attributionName">Polygoon-Profilti (producer) / Netherlands Institute for Sound and Vision (curator)</a>, is licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" rel="license">Creative Commons – Attribution-Share Alike</a>.</span>
  </div>
  <p>
    This video on Open Images <a href="http://www.openimages.eu/media/9728/Storm">http://www.openimages.eu/media/9728/Storm</a>.<br />
    OIPlayer 'attaches' itself to all video and/or audio tags it encounters. 
    Besides the general configuration of the plugin itself, it uses for each individual tag the 
    attributes the respective tag has like poster, width, controls, autoplay etc. 
    Easy implementation:
  </p>
<pre>
$(document).ready(function() {
    $('body').oiplayer();   // on all video and audio tags in body
});
</pre>
  <h3>Download</h3>
  <ul>
    <li>
      <a href="http://scm.mmbase.org/view/openimages/trunk/src/main/webapp/oiplayer/">Download
      the most recente version</a> from our svn repository; or
    </li>
  </ul>
  <h3>Features</h3>
  <ul>
    <li>Plays video as well as audio</li>
    <li>
      Fallback to <a href="http://www.flowplayer.org">Flowplayer</a> (mp4, h.264) 
      or <a href="http://www.theora.org/cortado/">Cortado</a> (oga, ogv)
    </li>
    <li>Easy to use and implement</li>
    <li>Consistent look between browsers, even with fallback</li>
    <li>Multiple different players on a page</li>
    <li>Play/pause</li>
    <li>Mute/unmute</li>
    <li>Full 'screen' (full window really, that is what HTML5 requires)</li>
    <li>Dark and white controls, on top or below player</li>
    <li>Easily skinnable with css</li>
    <li>iOS, iPhone, iPad etc. compatible</li>
    <li>Fires events: 'oiplayerplay' and 'oiplayerended' to use f.e. for play statistics</li>
  </ul>
  <h3>Supported browsers</h3>
  <ul>
    <li>Safari (v4.0+)</li>
    <li>Google Chrome (v5.0+)</li>
    <li>Firefox (v3.5+)</li>
    <li>Internet Explorer (v9.0+)</li>
    <li>Internet Explorer (v6.0+) with Flash or Java installed</li>
    <li>And maybe some untested others with HTML5 support, Flash or Java installed</li>
  </ul>
  <p>
    OIPlayer is part of the <a href="http://www.openimages.eu/source">Open Images Platform</a> 
    which is <a href="http://www.mmbase.org">MMBase</a> based and its most recent sources can be found in our SVN repository:
    <a href="http://scm.mmbase.org/view/openimages/trunk/src/main/webapp/oiplayer/">http://scm.mmbase.org/view/openimages/trunk/src/main/webapp/oiplayer/</a>.
    It is licensed under <a href="http://www.gnu.org/licenses/gpl.html">GPL</a>.
  </p>
  <h2>How-to</h2>
  <ol>
    <li>
      <a href="http://plugins.jquery.com/files/oiplayer-1.1.1.tar.gz">Download</a> and copy the 
      'oiplayer' directory to your site. Include these Javascript and css files in the head of your 
      html document. Note that the 'flowplayer-3.2.6.min.js' script is only needed for FlowPlayer.
<pre>
&lt;script src="js/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;!-- help ie --&gt;&lt;/script&gt;
&lt;script src="plugins/flowplayer-3.2.6.min.js" type="text/javascript"&gt;&lt;!-- help ie --&gt;&lt;/script&gt;
&lt;script src="js/jquery.oiplayer.js" type="text/javascript"&gt;&lt;!-- help ie --&gt;&lt;/script&gt;
&lt;link href="css/oiplayer.css" rel="stylesheet" type="text/css" /&gt;
</pre>
    </li>
    <li>
      Enable the jQuery plugin on all HTML5 video or audio tags in a page with a body with 
      class 'oiplayerexample'.
<pre>
$(document).ready(function() {
    $('body.oiplayer-example').oiplayer();
});
</pre>
    </li>
    <li>
      OIPlayer has a fallback mechanism that can be made to work 
      by installing <a href="http://www.flowplayer.org">Flowplayer</a> and 
      <a href="http://www.theora.org/cortado/">Cortado</a>. 
      Flowplayer needs the Flash plugin and plays h.264, flv and mp4. 
      Cortado is a Java applet that plays Ogg video and audio (ogv, oga).
      <ul>
        <li>server: web server (msie (or windows java) has issues with finding directories)</li>
        <li>jar: location of Cortado jar</li>
        <li>flash: location of Flowplayer and its files</li>
        <li>controls: current possible values and combintions are 'true', 'top', 'white', 'dark', 'top dark' and 'top white'.
           <ul>   
              <li>Simply 'true' means show controls below player,</li>
              <li>'top' will add a class of that name and will hide/show controls on top of the player window,</li>
              <li>and 'white' and 'dark' refer to light or dark styled versions which both can be used below or on top of your video.</li>
              <li>Or add a css class of your own to edit the appearance of the controls.</li>
            </ul>
        </li>
        <li>
          log: when you specify 'info' some messages are displayed on top of the media playing, 
          'error' does nothing for now.
        </li>
      </ul>
      These examples point to plugin files on <a href="http://www.openimages.eu">www.openimages.eu</a> 
      and should normally work with our media files.
<pre>
$(document).ready(function() {
    $('body.oiplayer-example').oiplayer({
        server : 'http://www.openimages.eu',
        jar : '/oiplayer/plugins/cortado-ovt-stripped-0.6.0.jar',
        flash : '/oiplayer/plugins/flowplayer-3.2.7.swf',
        controls : 'top',
        log : 'error'
    });
});
</pre>
    </li>
    <li>
      Especially when OIPlayer needs to fallback to Cortado or Flowplayer, your browser often has no way to
      detect the duration a media file. Since the html5 media tags have no attributes for 
      duration and starttime you can add that information using two classes on the mediatag. In this 
      case 'oip_ea_duration_101' (length is 101 seconds) and 'oip_ea_start_0' (start at 0 seconds).
      When you not including these the scrubber will not appear.
<pre>
&lt;video class="oip_ea_duration_101 oip_ea_start_0"&gt;
  ... source tags here ...
&lt;/video&gt;      
</pre>
    Besides these you can identify your player with an unique id f.e. with 'oip_ea_id_myid123', which
    is registered in 'player.id'. This can be usefull for example to track the number of plays of 
    a media item. OIPlayer fires two events to this effect: 'oiplayerplay' and 'oiplayerended', f.e.:
<pre>
$(document).ready(function() {
    $('div.oiplayer').bind("oiplayerplay", function(ev, player) {
        alert("I started playing: " + player.myname);
    }
}
</pre>
    </li>
    <li>To have OIPlayer detect Java support in  MSIE - for playing ogg with Cortado -
        you need this div somewhere (just once) in your page:
      <pre>&lt;div id="clientcaps"&gt;  &lt;/div&gt;</pre>
    </li>
    <li>
      You may encounter a 'Not allowed' with Cortado since it is often not allowed to play 
      files from different hosts by some browsers. Be sure to copy your files to the host
      from where your pages are served. Or use the Cortado jar from www.openimages.eu when you are 
      playing movies from there.
    </li>
  </ol>
  <address>
   Have fun! <a href="http://www.toly.nl">André van Toly</a>, 
   <a href="http://twitter.com/elfuego2">follow me on twitter</a>.
  </address>  
</div>

<script src="http://www.google-analytics.com/ga.js" type="text/javascript"> </script>
<script type="text/javascript">
try {
  var pageTracker = _gat._getTracker("UA-5799921-11");
  pageTracker._trackPageview();
} catch(err) {}
</script>

</body>
</html>
